<template>
  <el-container>
    <el-header :style="{background:'#ddd',textAlign: 'center'}">Header</el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="12">
          <div id="myPaletteDiv"
               style="border: solid 1px black; width: 100%;display: inline-block; height: 100px; background: whitesmoke"></div>
          <div id="myDiagramDiv"
               style="border: solid 1px black; width:100%; height:550px; display: inline-block; vertical-align: top"></div>
          <!--    <div id="myInspector"></div>-->
          <div id="myOverviewDiv"></div>
        </el-col>
        <el-col :span="12">
          <div
            style="min-height: 650px; border: 1px solid black; margin-left: 2px;padding: 10px">
            <el-breadcrumb separator-class="el-icon-arrow-right"
                           :style="{paddingBottom:'10px',borderBottom: '1px solid #000'}">
              <el-breadcrumb-item :to="{ path: '/test' }">联调阶段</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/test">第一次联调</a></el-breadcrumb-item>
              <el-breadcrumb-item>三小时准备</el-breadcrumb-item>
              <el-breadcrumb-item>设备基础检测</el-breadcrumb-item>
            </el-breadcrumb>
<!--            <el-table-->
<!--              :data="tableData"-->
<!--              style="width: 100%">-->
<!--              <el-table-column-->
<!--                prop="task"-->
<!--                label="任务"-->
<!--                >-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="progress"-->
<!--                label="进度"-->
<!--                >-->
<!--                <template slot-scope="scope">-->
<!--                  <el-progress v-if="scope.row.progress===100" :text-inside="true" :stroke-width="12" :percentage="scope.row.progress" status="success"></el-progress>-->
<!--                  <el-progress v-else :text-inside="true" :stroke-width="12" :percentage="scope.row.progress" status="warning"></el-progress>-->
<!--&lt;!&ndash;                  <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>&ndash;&gt;-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="state"-->
<!--                label="状态">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-popover trigger="hover" placement="top">-->
<!--                    <p>状态: {{ scope.row.state }}</p>-->
<!--                    <p>详情: {{ scope.row.details }}</p>-->
<!--                    <div slot="reference" class="name-wrapper">-->
<!--                      <el-tag v-if="scope.row.state==='准备中'" size="medium">{{ scope.row.state }}</el-tag>-->
<!--                      <el-tag v-else-if="scope.row.state==='完成'" type="success" size="medium">{{ scope.row.state }}</el-tag>-->
<!--                      <el-tag v-else type="danger" size="medium">{{ scope.row.state }}</el-tag>-->
<!--                    </div>-->
<!--                  </el-popover>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="eval"-->
<!--                label="评定结果">-->
<!--              </el-table-column>-->
<!--            </el-table>-->
            <el-col :style="{padding: '10px'}">
              <el-button type="primary" size="small">新增设备检测</el-button>
            </el-col>
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="task"
                label="任务"
              >
              </el-table-column>
              <el-table-column
                prop="progress"
                label="进度"
              >
                <template slot-scope="scope">
                  <el-progress v-if="scope.row.progress===100" :text-inside="true" :stroke-width="12"
                               :percentage="scope.row.progress" status="success"></el-progress>
                  <el-progress v-else :text-inside="true" :stroke-width="12" :percentage="scope.row.progress"
                               status="warning"></el-progress>
                  <!--                  <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>-->
                </template>
              </el-table-column>
              <el-table-column
                prop="state"
                label="状态">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>状态: {{ scope.row.state }}</p>
                    <p>详情: {{ scope.row.details }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag v-if="scope.row.state==='准备中'" size="medium">{{ scope.row.state }}</el-tag>
                      <el-tag v-else-if="scope.row.state==='完成'" type="success" size="medium">{{
                          scope.row.state
                        }}
                      </el-tag>
                      <el-tag v-else type="danger" size="medium">{{ scope.row.state }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                prop="eval"
                label="评定结果">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import go from "gojs";

export default {
  name: "flow",
  data() {
    return {
      myDiagram: null,
      flowData: null,
      tableData: [{
        task: '中心机',
        progress: 10,
        state: '准备中',
        eval: '正常'
      }, {
        task: '宜宾XX001光学设备',
        progress: 30,
        state: '准备中',
        eval: '正常'
      }, {
        task: '宜宾XX001脉冲设备',
        progress: 100,
        state: '完成',
        eval: '正常'
      }, {
        task: '宜宾XX001USB设备',
        progress: 90,
        state: '中断',
        eval: '异常'
      }]
    }
  },
  methods: {
    init($) {
      // Abstract colors
      let Colors = {
        "red": "#ff0000",
        "green": "#00ff1c",
        "blue": "#0067ff",
        "lightred": "#fd8852",
        "lightblue": "#afd4fe",
        "lightgreen": "#b9e986",
        "pink": "#faadc1",
        "purple": "#d689ff",
        "orange": "#f08c00"
      }

      let ColorNames = [];
      for (let n in Colors) ColorNames.push(n);

      // a conversion function for translating general color names to specific colors
      function colorFunc(colorname) {
        let c = Colors[colorname]
        if (c) return c;
        return "gray";
      }


      // Icons derived from SVG paths designed by freepik: http://www.freepik.com/
      let Icons = {};
      Icons.stage =
        "m113.182877,25.894732c-0.016482,-6.468653 -7.384067,-11.709786 -16.478172,-11.718574l0,-0.00293l-50.505864,0c-2.080889,-4.751882 -8.286472,-8.226439 -15.678781,-8.235228l-11.846648,0c-9.098225,0.005859 -16.469931,5.249921 -16.486413,11.718574l0,41.565784c0.016482,6.462794 7.388188,11.703926 16.486413,11.715645l78.035413,0c9.085864,-0.011719 16.461689,-5.252851 16.478172,-11.715645l0,-33.327626l-0.004121,0zm-94.509464,-14.100375l11.846648,0c4.310119,-0.011719 7.899139,2.443323 8.171096,5.496011l0.238993,2.745076l57.778676,0c4.503786,0.005859 8.228784,2.654257 8.237026,5.859287l0,1.450174c-2.435259,-1.010727 -5.224887,-1.631811 -8.241146,-1.634741l-78.035413,0c-3.016259,0.00293 -5.810008,0.626944 -8.241146,1.637671l0,-9.694191c0.012362,-3.20503 3.73736,-5.853428 8.245267,-5.859287zm78.031292,53.284358l-78.031292,0c-4.503786,-0.005859 -8.228784,-2.660116 -8.245267,-5.859287l0,-21.790689l0.004121,0c0.008241,-3.20796 3.733239,-5.856358 8.241146,-5.862217l78.035413,0c4.503786,0.005859 8.204061,2.639609 8.241146,5.83292l0,21.817056c-0.016482,3.20796 -3.74148,5.856358 -8.245267,5.862217z";

      Icons.LevelOne =
        "m0.75,54.25c0,-29.558011 28.417127,-53.5 63.5,-53.5c35.082873,0 63.5,23.941989 63.5,53.5c0,29.558011 -28.417127,53.5 -63.5,53.5c-35.082873,0 -63.5,-23.941989 -63.5,-53.5z"

      Icons.secondLevel =
        "m34.648854,7.268589c-3.648908,-3.390385 -7.584457,-6.106296 -10.81282,-6.476556c-0.17575,-0.024017 -0.357777,-0.038027 -0.550265,-0.04203l-21.24694,0c-0.338947,0 -0.673709,0.126089 -0.912227,0.360253c-0.236426,0.228161 -0.376607,0.548386 -0.376607,0.874615l0,51.536255c0,0.324228 0.131813,0.634446 0.376607,0.870612c0.244795,0.232163 0.567004,0.358252 0.912227,0.358252l38.422334,0c0.338947,0 0.663248,-0.124087 0.908043,-0.358252c0.244795,-0.234165 0.380792,-0.544383 0.380792,-0.870612l0,-34.294126c-0.075321,-3.9808 -3.335069,-8.321854 -7.101144,-11.958413zm-1.813993,1.745228c1.684272,1.573107 3.199071,3.35436 4.328894,5.071568c-0.979179,-0.37026 -2.006481,-0.644453 -2.971015,-0.862607c-2.123648,-0.456321 -4.201266,-0.640451 -5.492193,-0.714503c0.006277,-0.266187 0.008369,-0.566398 0.008369,-0.892628c0,-1.739224 -0.115075,-4.218968 -0.744846,-6.404505c-0.006277,-0.020014 -0.010461,-0.040028 -0.01883,-0.060042c1.59849,1.00871 3.339253,2.347652 4.889621,3.862717zm6.333283,43.268439l-35.844665,0l0,-49.070521l19.964382,0l0,0.004003c0.870382,-0.050035 1.621504,0.772543 2.196877,2.653867c0.523066,1.79126 0.654879,4.126903 0.652786,5.746042c0.004185,1.186835 -0.056491,1.983395 -0.056491,1.983395l-0.102521,1.304918l1.372525,0.01401c0.006277,0 3.171872,0.036025 6.276792,0.7105c2.983568,0.616434 5.316442,1.845298 5.534038,3.236277c0.008369,0.124087 0.010461,0.248175 0.008369,0.364256l0,33.053253l-0.002092,0z";

      Icons.threeLevel =
        "m33.668453,21.376999c-3.381915,-3.264816 -7.029496,-5.880138 -10.021637,-6.236685c-0.16289,-0.023127 -0.331598,-0.036618 -0.510002,-0.040473l-19.692284,0c-0.314146,0 -0.624413,0.121419 -0.845479,0.346911c-0.219126,0.21971 -0.349051,0.528075 -0.349051,0.842222l0,49.627517c0,0.31222 0.122168,0.610948 0.349051,0.838368c0.226883,0.223565 0.525515,0.344984 0.845479,0.344984l35.610941,0c0.314146,0 0.614717,-0.119491 0.8416,-0.344984c0.226883,-0.225492 0.352929,-0.524221 0.352929,-0.838368l0,-33.02398c-0.06981,-3.833364 -3.091039,-8.013639 -6.581547,-11.515511zm4.18861,43.346504l-33.221882,0l0,-47.253105l18.503572,0l0,0.003855c0.806695,-0.048182 1.502858,0.743931 2.03613,2.555576c0.484793,1.724918 0.606961,3.974056 0.605021,5.533227c0.003878,1.142878 -0.052358,1.909937 -0.052358,1.909937l-0.095019,1.256588l1.272096,0.013491c0.005818,0 2.939784,0.034691 5.817514,0.684185c2.765258,0.593603 4.927434,1.776954 5.129108,3.116415c0.007757,0.119491 0.009696,0.238983 0.007757,0.350765l0,31.829065l-0.001939,0z";

      let IconNames = [];
      for (let n in Icons) IconNames.push(n);

      // A data binding conversion function. Given an name, return the Geometry.
      // If there is only a string, replace it with a Geometry object, which can be shared by multiple Shapes.
      function geoFunc(geoname) {
        let geo = Icons[geoname];
        if (typeof geo === "string") {
          geo = Icons[geoname] = go.Geometry.parse(geo, true);
        }
        return geo;
      }

      // for conciseness in defining templates
      let myDiagram = $(go.Diagram, "myDiagramDiv",  // 为DIV HTML元素创建一个图表
        {
          // initialAutoScale: go.Diagram.Uniform,  // 缩放显示所有内容
          "ChangedSelection": this.onSelectionChanged, // view additional information
          "draggingTool.gridSnapCellSize": new go.Size(10, 10),
          "draggingTool.isGridSnapEnabled": true,
          "undoManager.isEnabled": true,
          "ModelChanged": function (e) {     // just for demonstration purposes,
            if (e.isTransactionFinished) {  // show the model data in the page's TextArea
              // 数据代码显示
              // document.getElementById("mySavedModel").textContent = e.model.toJson();
            }
          }
        });

      function makePort(name, align, spot, output, input) {
        let horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
        // the port is basically just a transparent rectangle that stretches along the side of the node,
        // and becomes colored when the mouse passes over it
        return $(go.Shape,
          {
            fill: "transparent",  // changed to a color in the mouseEnter event handler
            strokeWidth: 0,  // no stroke
            width: horizontal ? NaN : 8,  // if not stretching horizontally, just 8 wide
            height: !horizontal ? NaN : 8,  // if not stretching vertically, just 8 tall
            alignment: align,  // align the port on the main Shape
            stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
            portId: name,  // declare this object to be a "port"
            fromSpot: spot,  // declare where links may connect at this port
            fromLinkable: output,  // declare whether the user may draw links from here
            toSpot: spot,  // declare where links may connect at this port
            toLinkable: input,  // declare whether the user may draw links to here
            cursor: "pointer",  // show a different cursor to indicate potential link point
            // mouseEnter: function(e, port) {  // the PORT argument will be this Shape
            //   if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
            // },
            mouseLeave: function(e, port) {
              port.fill = "transparent";
            }
          });
      }

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          {
            locationObjectName: "PORT",
            locationSpot: go.Spot.Top,  // location point is the middle top of the PORT
            // linkConnected: updatePortHeight,
            // linkDisconnected: updatePortHeight,
            toolTip:
              $("ToolTip",
                $(go.TextBlock, {margin: 4, width: 140},
                  new go.Binding("text", "", function (data) {
                    return data.text + ":\n\n" + data.description;
                  }))
              )
          },
          new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
          // The main element of the Spot panel is a vertical panel housing an optional icon,
          // plus a rectangle that acts as the port
          $(go.Panel, "Vertical",
            $(go.Shape,
              {
                stroke: null,
                strokeWidth: 0,
                fill: "gray",
                width: 40,
                height: 40,
                margin: new go.Margin(-1, 0, 0, 0),
                portId: "",
                cursor: "pointer",
                fromLinkable: true,
                toLinkable: true
              },
              new go.Binding("height", "icon", function () {
                return 40;
              }),
              new go.Binding("fill", "color", colorFunc),
              new go.Binding("geometry", "icon", geoFunc)),
            // $(go.Shape,
            //   {
            //     name: "PORT",
            //     width: 40, height: 24,
            //     margin: new go.Margin(-1, 0, 0, 0),
            //     stroke: null,
            //     strokeWidth: 0,
            //     fill: "gray",
            //     portId: "",
            //     cursor: "pointer",
            //     fromLinkable: true,
            //     toLinkable: true
            //   },
            //   new go.Binding("fill", "color", colorFunc)),
            $(go.TextBlock,
              {
                font: "Bold 14px Lato, sans-serif",
                textAlign: "center",
                margin: 3,
                maxSize: new go.Size(120, NaN),
                alignment: go.Spot.Top,
                alignmentFocus: go.Spot.Bottom,
                editable: true
              },
              new go.Binding("text").makeTwoWay())
          )
        );

      function updatePortHeight(node, link, port) {
        let sideinputs = 0;
        let sideoutputs = 0;
        node.findLinksConnected().each(function (l) {
          if (l.toNode === node && l.toSpot === go.Spot.LeftSide) sideinputs++;
          if (l.fromNode === node && l.fromSpot === go.Spot.RightSide) sideoutputs++;
        });
        let tot = Math.max(sideinputs, sideoutputs);
        tot = Math.max(1, Math.min(tot, 2));
        port.height = tot * (10 + 2) + 2;  // where 10 is the link path's strokeWidth
      }

      myDiagram.linkTemplate =
        $(go.Link,
          {
            layerName: "Background",
            routing: go.Link.Orthogonal,
            corner: 12,
            reshapable: true,
            resegmentable: true,
            // fromSpot: go.Spot.BottomSide,
            // toSpot: go.Spot.TopSide
          },
          // make sure links come in from the proper direction and go out appropriately
          // new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
          // new go.Binding("toSpot", "toSpot", go.Spot.parse),
          makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
          makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
          makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
          makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false),
          new go.Binding("points").makeTwoWay(),
          // mark each Shape to get the link geometry with isPanelMain: true
          $(go.Shape, {isPanelMain: true, stroke: "gray", strokeWidth: 10},
            // get the default stroke color from the fromNode
            new go.Binding("stroke", "fromNode", function (n) {
              return go.Brush.lighten((n && Colors[n.data.color]) || "gray");
            }).ofObject(),
            // but use the link's data.color if it is set
            new go.Binding("stroke", "color", colorFunc)),
          $(go.Shape, {isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40]})
        );

      var SpotNames = ["Top", "Left", "Right", "Bottom", "TopSide", "LeftSide", "RightSide", "BottomSide"];

      // 获取数据
      // myDiagram.model = go.Model.fromJson(this.flowData);
      myDiagram.model.nodeDataArray = this.flowData.nodeDataArray
      myDiagram.model.linkDataArray = this.flowData.linkDataArray

      // Overview
      let myOverview =
        $(go.Overview, "myOverviewDiv",  // the HTML DIV element for the Overview
          { observed: myDiagram, contentAlignment: go.Spot.Center });   // tell it which Diagram to show and pan

      // show a collection of node types that the designer may drag into the main diagram
      let myPalette =
        $(go.Palette, "myPaletteDiv",
          {
            layout: $(go.GridLayout, {cellSize: new go.Size(1, 1)}),
            initialContentAlignment: go.Spot.TopLeft,
            initialScale: 0.8,
            nodeTemplate: myDiagram.nodeTemplate,  // shared with the main Diagram
            model: $(go.GraphLinksModel,
              {
                nodeDataArray: [
                  {"icon": "stage", "text": "阶段"},
                  {"icon": "LevelOne", "text": "一级节点"},
                  {"icon": "secondLevel", "text": "二级节点"},
                  {"icon": "threeLevel", "text": "三级节点"},
                  // {"icon": "pyrolysis", "text": "Pyrolysis (Cracking)"},
                  // {"icon": "polymerization", "text": "Basic Polymers"},
                  // {"text": "Intermediates"},
                  // {"icon": "finishedgas", "text": "LPG, Naphtha,\nMTBE"}
                ]  // end nodeDataArray
              })  // end model
          });  // end Palette

      // 显示并让设计器编辑选定节点或链接的一些数据属性
      // let myInspector = new Inspector("myInspector", myDiagram,
      //   {
      //     properties: {
      //       key: {show: false},
      //       pos: {show: false},
      //       icon: {show: function(part) { return part instanceof go.Node }, type: "select", choices: IconNames},
      //       color: {type: "select", choices: ColorNames},
      //       text: {show: function(part) { return part instanceof go.Node }},
      //       caption: {show: function(part) { return part instanceof go.Node }},
      //       imgsrc: {show: function(part) { return part instanceof go.Node }},
      //       from: {show: false},
      //       to: {show: false},
      //       points: {show: false},
      //       fromSpot: {show: function(part) { return part instanceof go.Link }, type: "select", choices: SpotNames},
      //       toSpot: {show: function(part) { return part instanceof go.Link }, type: "select", choices: SpotNames}
      //     },
      //     propertyModified: this.onSelectionChanged
      //   });
      this.myDiagram = myDiagram
      // myDiagram.click = function(e) {
      //   console.log(e)
      //   // e.diagram.commit(function(d) { d.clearHighlighteds(); }, "no highlighteds");
      // };

      this.myDiagram.addDiagramListener("ObjectSingleClicked",
        function(e) {
          var part = e.subject.part;
          if (!(part instanceof go.Link)) console.log("Clicked on " + part.data.key);
        });
    },
    onSelectionChanged() {
      let node = this.myDiagram.selection.first();
      if (!(node instanceof go.Node)) return;
      let data = node.data;
      // let image = document.getElementById("Image");
      // let title = document.getElementById("Title");
      // let description = document.getElementById("Description");
      //
      // if (data.imgsrc) {
      //   image.src = data.imgsrc;
      //   image.alt = data.caption;
      // } else {
      //   image.src = "";
      //   image.alt = "";
      // }
      // title.textContent = data.text;
      // description.textContent = data.description;
      // this.myDiagram.model.nodeDataArray = ''
      console.log(this.myDiagram.model.toJson())
    }
  },
  mounted() {
    let $ = go.GraphObject.make;
    this.flowData = {
      "class": "GraphLinksModel",
      "nodeDataArray": [
        {
          "key": 1,
          "pos": "-50 -97",
          "icon": "stage",
          "color": "blue",
          "text": "联调阶段",
          "description": "内部联调阶段，保障任务顺利进行。",
          "caption": "Gas Drilling Well",
        },
        {
          "key": 2,
          "pos": "1390 -97",
          "icon": "stage",
          // "color": "blue",
          "text": "实战阶段",
          "description": "完成实战任务",
          "caption": "Offshore oil well",
        },
        {
          "key": 3,
          "pos": "-710 432",
          "icon": "threeLevel",
          "color": "green",
          "text": "设备基础检测",
          "description": "任务前准备",
          "caption": "Natural gas plant",
        },
        {
          "key": 4,
          "pos": "-460 88",
          "icon": "LevelOne",
          "color": "blue",
          "text": "第一次基地内联调",
          "description": "第一次",
          "caption": "Gas Plant",
        },
        {
          "key": 5,
          "pos": "460 67",
          "icon": "LevelOne",
          // "color": "orange",
          "text": "第二次基地联调",
          "description": "第二次，包括：。。。",
          "caption": "Pyrolysis plant",
        },
        {
          "key": 6,
          "pos": "1030 75",
          "icon": "LevelOne",
          // "color": "red",
          "text": "全区合练",
          "description": "合练内容包括：。。。",
          "caption": "Plastics engineering-Polymer products",
        },
        {
          "key": 7,
          "pos": "-460 262",
          "icon": "secondLevel",
          "color": "blue",
          "text": "三小时准备",
          "description": "准备内容包括：。。。",
          "caption": "Lego Color Bricks",
        },
        {
          "key": 8,
          "pos": "-570 426",
          "icon": "threeLevel",
          "color": "red",
          "text": "连通性检查",
          "description": "连通性检查主要检查：。。。",
          "caption": "Sheet of synthetic rubber coming off the rolling mill at the plant of Goodrich",
        },
        {
          "key": 9,
          "pos": "-370 416",
          "icon": "threeLevel",
          "color": "blue",
          "text": "端到端时延测试",
          "description": "该测试主要负责。。。",
        },
        {
          "key": 10,
          "pos": "-200 420",
          "icon": "threeLevel",
          // "color": "blue",
          "text": "T0理论弹道检测",
          "description": "该检测主要负责。。。",
          "caption": "Liquid Petroleum Gas Truck",
        },
        {
          "key": 11,
          "pos": "10 430",
          "icon": "threeLevel",
          // "color": "blue",
          "text": "固定值检测",
          "description": "该检测主要负责。。。",
          "caption": "Natural Gas Flame"
        }
      ],
      "linkDataArray": [
        {"from": 1, "to": 4, "points": [-62, -83, -62, -73, -62, 2.5, -460, 2.5, -460, 78, -460, 88]},
        {"from": 1, "to": 6, "points": [-46, -83, -46, -65, -46, 0, 1030, 0, 1030, 65, 1030, 75]},
        {"from": 1, "to": 5, "points": [-54, -83, -54, -57, -54, 0, 460, 0, 460, 57, 460, 67]},
        {"from": 4, "to": 7, "points": [-460, 102, -460, 112, -460, 182, -460, 182, -460, 252, -460, 262]},
        {
          "from": 7,
          "to": 3,
          "points": [-473.3333333333333, 276, -473.3333333333333, 286, -473.3333333333333, 354, -710, 354, -710, 422, -710, 432]
        },
        {
          "from": 7,
          "to": 8,
          "points": [-466.6666666666667, 276, -466.6666666666667, 294, -466.6666666666667, 355, -570, 355, -570, 416, -570, 426]
        },
        {"from": 7, "to": 9, "points": [-460, 276, -460, 302, -460, 354, -370, 354, -370, 406, -370, 416]},
        {
          "from": 7,
          "to": 10,
          "points": [-453.3333333333333, 276, -453.3333333333333, 294, -453.3333333333333, 352, -200, 352, -200, 410, -200, 420]
        },
        {
          "from": 7,
          "to": 11,
          "points": [-446.6666666666667, 276, -446.6666666666667, 286, -446.6666666666667, 353, 10, 353, 10, 420, 10, 430]
        },
        {"from": 1, "to": 2, "points": [-30, -90, -20, -90, 670, -90, 670, -90, 1360, -90, 1370, -90]}
      ]
    }

    this.init($)

    // this.initLck($, "myDiagramDiv", "myPaletteDiv", yzj);
    // this.initLck($, "myDiagramDiv2", "lck", lck);
  }
}
</script>

<style scoped>

</style>

<style type="text/css">
#myOverviewDiv {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0px;
  left: 10px;
  background-color: #f2f2f2;
  z-index: 300; /* make sure its in front */
  border: solid 1px #7986cb;
}
</style>
